<template>
  <div class="pages">
    <!-- <div class="pageLevel" v-if="!sub"> -->
    <!-- 头部 -->
    <div class="head">
      <div class="head-title">
        广告位置
        <el-tag :type="bannerType" @click="getBannerList">首页banner图</el-tag>
        <el-tag :type="classType" @click="getClassList">课堂banner图</el-tag>
      </div>
      <div class="head-search">
        <el-input class="input" v-model="keyword" size="small" placeholder="请输入广告标题" clearable></el-input>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="small"
          @click="searchSelect"
          :disabled="dis"
          class="Button"
        >查询</el-button>
      </div>
      <div class="head-add">
        <el-button type="primary" :disabled="dis" @click=" routerPush('0', '')" size="mini" v-if="setRole('新增广告')">新增广告</el-button>
      </div>
    </div>
    <div class="list-body">
      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
        <template v-for="(item,index) in tabsList">
          <el-tab-pane :label="item.label" :name="item.name" :key="index">
            <listtable :tableDataList="tableDataList" :operateShow="operateShow" :pageSize="pageSize" :pageNum="pageNum"
             v-on:listDataFN="listdata"></listtable>
          </el-tab-pane>
        </template>
      </el-tabs>
       <div class="pageblock">
          <el-button size="small" type="primary" class="topage" @click="toPage">确定</el-button>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="['5','10','15',20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalItems">
          </el-pagination>
        </div>
    </div>
  </div>
</template>
<script>
import util from "@/util";
import listtable from "./advertisement-list-table";
import {
  queryAdv, // 查询广告
  uploadFile,
  getFile
} from "@/api";
import { mapState } from "vuex";
export default {
  computed: mapState(["sub", "power", "merchantId"]),
  data() {
    return {
      bannerType: '',
      classType:'info',
      listPosition: 0,
      listStatus: 1,
      operateShow: true,
      keyword: "",
      dis: false,
      activeName: "running",
      tableDataList: [],
      tabsList: [{
        name: 'running',
        label: '进行中'
      },{
        name: 'unStart',
        label: '未开始'
      },{
        name: 'closing',
        label: '已下架'
      }],
      total: 0,
      pageSize: 20,
      totalItems: 0,
      currentPage: 1,
      pageNum: 0,
    };
  },
  created() {
    this.getListData(this.merchantId,0,1,'',this.currentPage,this.pageSize);

  },
  mounted() {
  },
  components: {
    listtable: listtable
  },

  methods: {
    setRole (key) {
      return util.selectTitle(this.power, key)
    },

    getBannerList() {
      this.bannerType=''
      this.classType='info'
      this.listPosition = 0;
      this.getListData(this.merchantId,this.listPosition,this.listStatus,this.keyword,1,this.pageSize)
    },

    getClassList() {
      this.bannerType='info'
      this.classType=''
      this.listPosition = 1;
      this.getListData(this.merchantId,this.listPosition,this.listStatus,this.keyword,1,this.pageSize)
    },

    listdata(param){
      this.getListData(this.merchantId,this.listPosition,this.listStatus,this.keyword,1,this.pageSize)
    },

    handleClick(type, event) {
      switch (type.name) {
        case "unStart":
          this.listStatus = 0
          this.unStartListClick();
          break;
        case "running":
          this.listStatus = 1
          this.runningListClick();
          break;
        case "closing":
          this.listStatus = 2
          this.closingListClick();
          break;
      }
    },
    getListData(companyId,position,status,title,pageNum,pageSize) {
      let data = {
        companyId: companyId,
        position: position,
        status: status,
        title: title,
        pageNum: pageNum,
        pageSize: pageSize,
        appId: 0  //(0:会员app,1:婴联通)',
      }
      queryAdv(data).then(res => {
        this.tableDataList = res.data.list;
        this.totalItems = res.data.totalRecord;
      })
    },

    unStartListClick() {
      this.operateShow = false
      this.getListData(this.merchantId,this.listPosition,0,this.keyword,this.currentPage,this.pageSize)
    },

    runningListClick() {
      this.operateShow = true;
      this.getListData(this.merchantId,this.listPosition,1,this.keyword,this.currentPage,this.pageSize)
    },

    closingListClick() {
      this.operateShow = false;
      this.getListData(this.merchantId,this.listPosition,2,this.keyword,this.currentPage,this.pageSize)
    },

    searchSelect() {
      this.getListData(this.merchantId,this.listPosition,this.listStatus,this.keyword,this.currentPage,this.pageSize)
    },

    toPage() {
      this.getListData(this.merchantId,this.listPosition,this.listStatus,this.keyword,this.currentPage,this.pageSize)
      this.pageNum = this.currentPage -1;

    },

    routerPush(status, id) {
      util.routerTo(
        "/app-management/advertisement-management/advertisement-add",
        {
          status: status,
          id: id
        }
      );
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = this.currentPage -1;
      this.getListData(this.merchantId,this.listPosition,this.listStatus,this.keyword,this.currentPage,this.pageSize)
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.pageNum = this.currentPage -1 ;
      this.getListData(this.merchantId,this.listPosition,this.listStatus,this.keyword,this.currentPage,this.pageSize)
    },
  }
};
</script>
<style lang="less" scoped>
.pages {
  padding: 20px 40px;
  .head {
    display: flex;
    justify-content: space-around;
    margin-bottom: 30px;
    .head-title {
      width: 290px;
      display: flex;
      justify-content: space-between;
      line-height: 30px;
    }
    .head-search {
      display: flex;
      justify-content: space-between;
    }
  }
}
.el-tag {
  cursor: pointer;
}
.Button {
  margin-left:10px;
}
</style>


